<template>
  <div class="money">
    <div class="money_nav">
      <van-nav-bar title="账户金额" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="money_content">
        <div class="content_header">
            <van-icon name="gold-coin" color="#FFA500" size="70px"/>
            <div>我的零钱</div>
            <div>￥<span>{{customerById.money}}</span></div>
        </div>
        <div class="money_botton">
            <van-button type="primary" block round color="#FFA500" to="/manager/recharge">充值</van-button>
            <div></div>
            <van-button type="primary" block round color="#ccc" to="/manager/cashOut">提现</van-button>
        </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    data(){
        return{

        }
    },
    computed:{
        ...mapState('money',['customerById']),
        ...mapState('login',['userInfo'])
    },
    created(){
        this.toFindCustomer();
    },
    methods:{
        ...mapActions('money',['findCustomer']),
        onClickLeft(){
            this.$router.push({path:'/manager/user'})
        },
        toFindCustomer(){
            let id = localStorage.getItem('id')
            this.findCustomer(id);
        }
        
    }
}
</script>
<style scope>
  .money_content .content_header{
    width:100%;
    margin:0 auto;
    text-align: center;
    padding-top:30px
  }
  .money_content .content_header>div:nth-child(2){
      margin-top:10px;
  }
  .money_content .content_header>div:last-child{
      margin-top:20px;
      font-weight: 700;
      font-size:35px;
      text-align:center
  }
  .money_botton{
      padding:20px;
      height: 100px;
  }
  .money_botton>*{
      margin-bottom:20px;
  }
</style>